<template>
   <div class="container">
      <div class="min-container" v-if="isLoggedIn1">
         <div class="profile">
        <div class="profile-header">
         <img style="width: 100px;height: 100px;border-radius: 50px;" :src="user.headUrl" size="large" />
        </div>
          <div class="profile-body">
      <Layout>
        <div style="font-size: 18px;font-weight: bold;">{{user.nickname}}</div>
        <Content style="margin-top: 10px;">
          <i style="color: #eb3bff;" @click="closemessage">退出账号登录</i>
        </Content>
      </Layout>
   </div>
    </div>
  </div>
      <div class="min-container" v-if="!isLoggedIn1">
         <div style="font-weight: bold;font-size: 16px;">登录瑞瑞的交易平台你可以</div>
         <div class="min-text"> 
         <div style="font-size: 16px"><Icon style="margin-right: 10px;" type="ios-card-outline" />购买/上传商品</div>
         <div style="font-size: 16px;margin-left: 20px;"><Icon style="margin-right: 10px;" type="ios-contacts-outline" />修改保存个人信息</div>
         <div style="font-size: 16px;margin-left: 20px;"><Icon style="margin-right: 10px;" type="ios-outlet-outline" />对其他商品进行评论</div>
      </div>
     <Button style="margin-top: 20px;margin-bottom: 20px;" type="warning" @click="showLoginModal">立即登录</Button>
     </div>
     <div class="min-container">
     <div style="font-weight: bold;font-size: 16px;margin-top: 20px;margin-bottom: 20px;">常规</div>
     <div style="font-size: 16px; margin-top:10px">对于普通用户来说，注册的账号请输入你的学号</div>
     <div style="font-size: 16px; margin-top:10px">本页面功能不一定完美，存在问题请见谅</div>
     <div style="font-size: 16px; margin-top:10px">颜色样式点击左边月亮按钮变黑</div>
     <div style="font-size: 16px; margin-top:10px">如果想要变成白色点击太阳按钮</div>
     <div style="font-size: 16px; margin-top:10px">更多功能敬请期待</div>
     <div style="font-size: 16px; margin-top:10px">......</div>
     </div>
     <div class="min-container">
     <div style="font-weight: bold;font-size: 16px;margin-top: 20px;margin-bottom: 20px;">关于瑞瑞交易平台</div>
     <div style="font-size: 16px; margin-top:10px">版本号：v1.0</div>
     <div style="font-size: 16px; margin-top:10px">当你注册本平台账号的时候就默认同意了本平台的服务条例</div>
     <div style="font-size: 16px; margin-top:10px">未登录时候进入本页面页面会显示登录按钮，登录后进入本页面又是其他的样式</div>
     <div style="font-size: 16px; margin-top:10px">哎！叹气</div>
     <div style="font-size: 16px; margin-top:10px">敬请期待。。。</div>
     </div>
     <Modal
       title="登录"
       v-model="loginModalVisible"
       @on-cancel="cancelLogin"
       :closable="false"
       :mask-closable="false"
     >
       <Form v-if="loginForm" :rules="loginFormRules" :label-width="100">
         <FormItem label="用户名" >
           <Input v-model="username" placeholder="请输入用户名" />
         </FormItem>
         <FormItem label="密码">
           <Input v-model="password" placeholder="请输入密码" type="password" />
         </FormItem>
         <div style="text-align: center;">
          <Button type="primary" @click="handleLogin">登录</Button>
           <Button @click="cancelLogin">注册</Button>
         </div>
       </Form>

       <Form v-if="!loginForm" :rules="loginFormRules" :label-width="100">
         <FormItem label="用户名" >
           <Input v-model="username" placeholder="请输入准备注册用户名" />
         </FormItem>
         <FormItem label="密码">
           <Input v-model="password" placeholder="请输入密码" type="password" />
         </FormItem>
         <div style="text-align: center;">
          <Button @click="loginForm = true">返回登录</Button>
          <Button @click="cancelLoginnew">确认注册</Button>
         </div>
       </Form>
     </Modal>
   </div>
 </template>
 
 <script>
 import { Button, Modal, Form, FormItem, Input } from 'iview';
 import axios from "axios";
 
 export default {
   name: 'LoginDemo',
   components: {
     Button,
     Modal,
     Form,
     FormItem,
     Input,
   },
   data() {
     return {
      loginForm:true,
      globusername:'',
       loginModalVisible: false,
       user: {
        studentId:'',
         nickname:'',
         headUrl:'',
         username:'',
       },
       username: '',
       password: '',
       isLoggedIn1:false,
       loginFormRules: {
         username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
         password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
       },
     };
   }, 
   watch: {
    isLoggedIn1(login) {
      localStorage.setItem("isLoggedIn1", login);
    },
  },
   mounted(){
    const savedUser = localStorage.getItem("user");
    console.log(localStorage.getItem("user"));
    if (savedUser) {
      this.user = JSON.parse(savedUser);
      console.log(111111111111111,this.user);
      this.isLoggedIn1 = true;
    }
    const isLoggedIn1 = localStorage.getItem("isLoggedIn1");
    if (isLoggedIn1) {
      this.isLoggedIn1 = true;
    }
   },
   methods: {
     showLoginModal() {
       this.loginModalVisible = true;
     },
     cancelLogin() {
      this.loginForm = false
     },
     cancelLoginnew(){
      axios
        .post("http://localhost:8081/salvage/students/register", {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          if (response.data.code == "00000") {
            this.$Message.info("正在注册中，注册完成自动登录");
            this.handleLogin();
          } else {
            this.$Message.info("该用户已存在");
          }
        });
     },
     //账号退出登录
     closemessage(){
       this.user = [];
       this.isLoggedIn1 = false;
     },
     handleLogin() {
      axios
        .post(
          "http://localhost:8081/salvage/students/login",
          {
            username: this.username,
            password: this.password,
          }
        )
        .then((response) => {
          if (response.data.code == "00000") {
            this.$Message.info('登录成功');
            this.loginModalVisible = false;//关闭登录页面
            this.showMine = true;//显示个人信息
            console.log(response.data);
            this.isLoggedIn1 = true;
            this.user.studentId = response.data.data.studentId;
            this.user.nickname = response.data.data.nickname;
            this.user.headUrl = response.data.data.headUrl;
            this.user.username  =  response.data.data.username;
            let user = response.data.data;
            console.log(user);
             localStorage.setItem("user", JSON.stringify(user));
           console.log(JSON.stringify(user));
          } else {
            this.$Message.info(response.data.message);
          }
        });
     },
   },
 };
 </script>
 <style scoped>
.container{
   width: 100%;
   height: 100%;
}
.min-container{
   margin-top: 40px;
   margin-left: 40px;
   border-bottom: 1px solid rgb(231, 231, 231);
   border-left: none;
   border-right: none;
   border-top: none;
}
.min-text{
   display: flex;
   margin-top: 20px;
}
.profile {
  display: flex;
  align-items: center;
  padding: 20px;
}

.profile-header {
  margin-right: 20px;
}

</style>
 